<script lang="ts">
import {Vue, Component, Prop, Emit} from 'vue-property-decorator';
import {addMerchant, getMerchantInfoById, selectAllMerchantCategory, updateMerchant} from "@/api/merchant";
import {getToken} from "@/utils/cookies";


interface MerChantInfo {
  address: string,
  description: string,
  image: string,
  phone: string,
  shopName: string,
  shopCategoryId: number,
  identityCard: string,
  certification: string,
  id?:number,
  status?:number
}
@Component({
  name: 'Edit'
})
export default class Edit extends Vue {
  @Prop(Array) merchantCategory!:[]
  @Prop(Boolean) isAdd!:boolean
  @Prop(Object) updateMerchantInfo!:any
  private title = ''
  private buttonTitle = ''
  public merchantInfo: MerChantInfo = {
    address: '',
    description: '',
    image: '',
    phone: '',
    shopName: '',
    shopCategoryId: null as number,
    identityCard: '',
    certification: '',
  }

  private headers = {
    token: getToken()
  }

  beforeMount() {
    console.log("this is update", this.updateMerchantInfo)
    this.title = this.isAdd?'添加商品':'修改商品'
    this.buttonTitle = this.isAdd?'添加':'修改'
  }

  mounted(){
    this.init()
  }

  async init(){
    if(!this.isAdd) {
      const {data} = await getMerchantInfoById(this.updateMerchantInfo.id)
      if(data.code===1) {
        this.merchantInfo = data.data
        console.log("byId", this.merchantInfo)
      }
    }
  }

  @Emit()
  back(status: number) {
  }

  handleAvatarSuccess(response, file, fileList) {
    this.merchantInfo.image = response.data
    console.log(response)
  }

  handleCardSuccess(response, file, fileList) {
    this.merchantInfo.certification = response.data
  }

  beforeUploadFiles(rawfile) {
    if (rawfile.type === 'image/png' || rawfile.type === 'image/jpeg' || rawfile.type === 'image/jpg') {
      console.log("success")
      return true
    } else {
      this.$message.error("文件格式不符")
      return false
    }
  }

  beforeUploadCard(rawfile) {

  }

  remove() {

  }

  add(params){
    console.log("添加")
    this.returnMerchantInfo(params)
  }

  update(params) {
    params.id = this.updateMerchantInfo.id
    console.log(params)
    this.returnMerchantInfo(params)
  }

  async returnMerchantInfo(params){
    if(Object.values(params).some(value=>value===null||value===undefined||value==='')) {
      this.$message.error({
        message:'信息填写不完整',
        type:'error'
      })
      return
    }
    const {data} = this.isAdd ? await addMerchant(params) : await updateMerchant(params)
    if(data.code===1) {
      this.$message.success({
        type:'success',
        message:this.isAdd?'添加成功':'修改成功'
      })
      this.$emit('back', 0)
    }else {
      this.$message.error({
        message:this.isAdd?'添加失败':'修改失败',
        type:'error'
      })
      return
    }
  }

}
</script>

<template>
  <div>
    <h3>{{ title }}</h3>
    <el-form label-position="right">
      <el-form-item label="商家名称:">
        <el-input v-model="merchantInfo.shopName" style="width: 240px" placeholder="请输入商家名称"></el-input>
      </el-form-item>
      <el-form-item label="商家分类:">
        <el-select v-model="merchantInfo.shopCategoryId" placeholder="请选择商家分类">
          <el-option v-for="item in merchantCategory" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商家图片:">
        <el-upload
          class="avatar-uploader"
          accept=".png,.jpg,.jpeg"
          action="/platform/common/upload"
          :limit="1"
          :show-file-list="false"
          :on-remove="remove"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUploadFiles"
          list-type="picture"
          :headers="headers">
          <img v-if="merchantInfo.image" style="width: 200px" :src="merchantInfo.image" class="avatar" alt="">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商家地址:">
        <el-input v-model="merchantInfo.address" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="商家电话:">
        <el-input v-model="merchantInfo.phone" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="营业证书:">
        <el-upload
          class="avatar-uploader"
          action="/platform/common/upload"
          :limit="1"
          accept=".png,.jpg,.jpeg"
          list-type="picture"
          :show-file-list="false"
          :on-success="handleCardSuccess"
          :before-upload="beforeUploadCard"
          :on-remove="remove"
          :headers="headers"
        >
          <img v-if="merchantInfo.certification" style="width: 200px;" :src="merchantInfo.certification" class="avatar" alt="">
          <el-icon v-else class="el-icon-plus avatar-uploader-icon"></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input v-model="merchantInfo.identityCard" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="商家描述:">
        <el-input v-model="merchantInfo.description" :rows="4" style="width: 400px" type="textarea"></el-input>
      </el-form-item>
      <el-form-item style="width: 200px;padding-left: 30px">
        <el-button @click="back(0)" size="large">取消</el-button>
        <el-button @click="isAdd?add(merchantInfo):update(merchantInfo)" style="margin-left: 30px" size="large" type="primary">{{buttonTitle}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.el-form {
  width: 40%;
  margin-left: 35%;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}


.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  display: block;
}
</style>
